<template>
	<view>
		<view class="team-container">
			<uni-search-bar placeholder="搜索" :radius="100" :bgColor="bgColor" @confirm="search" @cancel="cancel"></uni-search-bar>
		</view>
		<view v-if="list.length && list[0].data.length && list[0].data[0].subList.length">
			<view v-for="(item, index) in list" :key="index">
				<uni-collapse ref="add" class="warp" @change="change">
					<uni-collapse-item v-for="(sub, key) in item.data" :key="key" :open="sub.open" :show-animation="sub.showAnimation"
					 :disabled="sub.disabled" :title="sub" class="list-ul">
						<template v-if="!sub.type">
							<text class="content">{{ sub.content }}</text>
						</template>
						<template v-else>
							<view v-for="(list, listIndex) in sub.subList" :key="listIndex" class="list-item">
								<view class="uni-list-item__container">
									<image :src="list.thumb" class="uni-list-item__icon-img" />
									<view class="uni-list-item__content">
										<view class="uni-collapse-cell__name">
											<view class="uni-collapse-cell__n"> {{ list.title }} </view>
											<view class="uni-collapse-cell__t" v-if="list.t">团长</view>
										</view>
										<view class="uni-collapse-cell__num">{{ list.num }}<span v-if="list.t">人</span></view>
									</view>
									<view class="uni-list-item__extra" @click="details(list)">查看详情</view>
								</view>
							</view>
						</template>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<!-- <view class="button" @click="addTeam()">添加团队</view> -->
			<!-- 弹出层 -->
			<view class="uni-banner" style="background:#FFFFFF;" v-if="bannerShow">
				<image src="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" class="banner_img"></image>
				<view class="banner_nav">
					<view class="banner_name">
						<view style="color:#00be48;">{{detailsObj.title}}</view>
						<image src="../../static/images/edit.png" @click="toSystem(detailsObj)"></image>
					</view>
					<view class="banner_phone">{{detailsObj.num}}</view>
				</view>
				<view class="banner_box">
					<view>设备编号：{{detailsObj.package_no}}</view>
					<view>设备状态：{{detailsObj.state || ''}}</view>
					<view>设备信号：{{detailsObj.xinhao || ''}}</view>
					<view>设备距离：{{detailsObj.juli || ''}}</view>
					<view>位置:{{detailsObj.address}}
						<image src="../../static/images/guide.png" class="map" @click="ToMap()"></image>
					</view>
				</view>
			</view>
			<view class="uni-mask" v-if="bannerShow" @click="bannerShow=false"></view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/index.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	export default {
		components: {
			uniSearchBar,
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				bgColor: '#EEEEEE',
				list: [{
					data: [{
						type: true,
						subName: '',
						showAnimation: true,
						thumb: '',
						num: '',
						subList: []
					}]
				}],
				bannerShow: false,
				detailsObj: {},
			}
		},
		onLoad(option) {
			this.search()
		},
		methods: {
			search(e) {
				this.$myRuquest({
					url: "/jsl/user/UserEquipmentListById",
					data: {
						"requestParams": {
							"procedure": {
								"p_uid": this.$utils.getData("p_uid"),
								"p_page_no": 1,
								"p_page_size": 999
							}
						}
					}
				}).then(res => {
					let sub = []
					res.forEach((item, index) => {
						if (index === 0) {
							this.list[0].data[0].subName = item.nickname
							this.list[0].data[0].thumb = item.avatar
							this.list[0].data[0].num = res.length
						}
						sub.push({
							title: item.nickname,
							thumb: item.avatar,
							num: item.private_phone,
							package_no: item.package_no,
							address: `${item.country}${item.province}${item.city}`
						})
					})
					this.list[0].data[0].subList = sub
				})
			},
			/**
			 * 去系统设置
			 */
			toSystem(obj) {
				uni.navigateTo({
					url:`../system-setting/system-setting?package_no=${obj.package_no}`
				})
			},
			cancel(e) {
			},
			change(e) {

			},
			details(list) {
				this.detailsObj = list;
				this.bannerShow = true;
			},
			ToMap() {
				const latitude = '30.689514';
				const longitude = '104.052012';
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					success: function() {
					}
				});
			},
			addTeam() {
				uni.navigateTo({
					url: '/pages/team/add-team'
				})
			},
		}
	}
</script>

<style lang="scss">
	.team-container {
		border-top: 1px solid #EDEDED;
	}

	.content {
		padding: 15px;
		font-size: 14px;
		line-height: 20px;
		background-color: #f9f9f9;
		color: #666;
	}

	.list-item {
		border-bottom: 1px solid #EDEDED;
	}

	.uni-list-item__container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0 25rpx;
		flex: 1;
		position: relative;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-item__content {
		width: 66%;
	}

	.uni-collapse-cell__name {
		width: 60%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		display: -webkit-flex;
	}

	.uni-collapse-cell__n {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.uni-collapse-cell__t {
		width: 70rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		background: rgba(33, 200, 133, 0.2);
		border-radius: 5rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #21C885;
		margin: 6rpx 0 0 11rpx;
	}

	.uni-collapse-cell__num {
		padding: 7rpx 0 0 0;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}

	.uni-list-item__extra {
		width: 140rpx;
		height: 60rpx;
		background: #21C885;
		border-radius: 10rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}

	.uni-list-item__icon-img {
		height: 80rpx;
		width: 80rpx;
		margin: 15rpx 22rpx 15rpx 0;
	}

	.button {
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		background: #21C885;
		border-radius: 8rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		position: fixed;
		bottom: 50rpx;
		left: 5%;
	}

	/* 弹出层形式的广告 */
	.uni-banner {
		width: 68%;
		position: fixed;
		left: 50%;
		top: 50%;
		background: #FFF;
		border-radius: 20upx;
		z-index: 9999;
		transform: translate(-50%, -50%);
		box-shadow: 0px 0px 17rpx 1px rgba(0, 0, 0, 0.09);
	}

	.banner_img {
		width: 116rpx;
		height: 116rpx;
		position: absolute;
		top: -58rpx;
		left: 40%;
	}

	.banner_nav {
		width: 100%;
		padding-top: 72rpx;
	}

	.banner_name {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		display: -webkit-flex;
		width: 44%;
		margin: 0 auto;
	}

	.banner_name view {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.banner_name image {
		width: 29rpx;
		height: 30rpx;
		margin-left: 16rpx;
		margin-top: 10rpx;
	}

	.banner_phone {
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		padding-top: 18rpx;
	}

	.banner_box {
		padding: 9rpx 0 55rpx 53rpx;
	}

	.banner_box view {
		font-size: 32rpx;
		font-weight: 500;
		color: #2CB47D;
		padding-top: 28rpx;
	}

	.map {
		width: 40rpx;
		height: 40rpx;
		top: 10rpx;
		margin-left: 15rpx;
		position: relative;
	}

	.uni-mask {
		background: rgba(0, 0, 0, 0);
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 9998;
	}
</style>
